<template>
        <card class="layer-con">
            <p slot="title">用户信息</p>
            <span slot="extra" @click.prevent="remove">
                <Icon type="close-round" color="#495060"></Icon>
            </span>
            <Row  class="user-info-con">
                
                <Col span="6">
                    <span>手机号码：{{callUserInfo.telNo}}</span> 
                </Col>
                <Col span="6">
                    <span>号码归属地：{{callUserInfo.mobileArea}}</span>  
                </Col>
                <Col span="6">
                    <span>IVR路径：{{callUserInfo.IVR_path}}</span>  
                </Col>
                <Col span="6">
                    <span>用户关系：{{callUserRelationTheStudentInfo.relation}}</span>  
                </Col>
            </Row>
            <Row  class="user-info-con">
                <Col span="6">
                    <span>生命周期：{{data.lifeCycle}}</span>
                </Col>
                <Col span="6">
                    <span>学生姓名：{{data.name}}</span> 
                </Col>
                <Col span="6">
                    <span>英文名字：{{data.englishName}}</span>  
                </Col>
                <Col span="6">
                    <span>学生ID：{{data.id}}</span>  
                </Col>
            </Row>
            <Row  class="user-info-con">
                <Col span="6">
                    <span>类型：{{data.studentType}}</span>
                </Col>
                <Col span="6">
                    <span>班主任姓名：{{data.teacherName}}</span> 
                </Col>
                <Col span="6">
                    <span>销售姓名：{{data.salesName}}</span>  
                </Col>
                <Col span="6">
                    <span>TMK姓名：{{data.tmkName}}</span>  
                </Col>
            </Row>
            <Row  class="user-info-con">
                <Col span="6">
                    <span>年龄：{{data.Age}}岁</span>
                </Col>
                <Col span="6">
                    <span>出生年月日：{{data.stuBirthday}}</span> 
                </Col>
                <Col span="6">
                    <span>渠道信息：{{data.channelName}}</span>
                </Col>
                <Col span="6">
                    <span>特殊备注：{{data.channelInfo}}</span> 
                </Col>
            </Row>
            <Row  class="user-info-con">
               
                <Col span="8">
                    <span>注册时间：{{data.createDateTime}}</span>  
                </Col>
            </Row>
            <Row  class="user-info-con">
                <Col span="24">
                    <p>Parent: <span v-for="item in data.familyListData">{{item.relation | getChineseRealation}}-{{item.mobile}}; </span> </p>
                </Col> 
            </Row>
            <Row  class="user-info-con">
                <Col span="24">
                    <p> 家庭地址: <a title="添加地址"><Icon type="plus-round" @click.native="showAddFamilyAdressDiv" ></Icon></a></p>

                    <ul class="address-container">  
                        <li :class="item.isDefault==1 ? 'default' :''" v-for="(item,index) in studentAddress">
                            <span v-if="item.userName">姓名:{{item.userName}}</span>
                            <span v-if="item.mobile">手机号码:{{item.mobile}}</span>
                            <span v-if="item.province">省:{{item.province}}</span>
                            <span v-if="item.city">市:{{item.city}}</span>
                            <span v-if="item.district">区:{{item.district}}</span>
                            <span v-if="item.address">详细地址:{{item.address}}</span>
                            <a class="edit-icon" title="编辑地址"><Icon type="edit" @click.native="showEditAdressLayer(item)"></Icon></a>
                            <a v-if="item.isDefault!=1" class="config-icon" title="设置默认地址"><Icon type="ios-gear" @click.native="setDefaultAddress(item.id)"></Icon></a>
                            <a v-if="item.isDefault!=1" class="del-icon" title="删除地址"><Icon type="trash-a" @click.native="delStuAddress(item.id)"></Icon></a>
                         </li> 
                    </ul>
                </Col> 
            </Row>
        </card>
        </template>
<style scoped>
    .layer-con {
        width: 800px;
        height: 516px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -400px;
        margin-top: -258px;
        z-index: 20000;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
        padding-bottom: 10px;
        overflow-y: auto;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
    
    .user-info-con {
        text-align: left;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    
    .user-info-con span {
        white-space: nowrap;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import thirdService from 'service/thirdService.js'
    import addressAction from 'components/user/addressAction.js'
    import funs from '@/libs/func.js'
    export default {
        name: 'studentInfo',
        props: {
            data: Object,
            remove: Function
        },
        created() {
            this.$store.dispatch('getStudentAddress', {
                'familyId': this.data.familyId
            })

        },
        computed: {
            ...mapGetters({
                callUserRelationTheStudentInfo: 'callUserRelationTheStudentInfo',
                callUserInfo: 'callUserInfo',
                studentAddress: 'studentAddress'
            })
        },
        filters: {
            getChineseRealation: function(value) {
                return funs.getChineseRealation(value)
            }
        },
        methods: {

            showAddFamilyAdressDiv() {
                addressAction.showAddressForm({
                    "title": '添加地址',
                    "type": 'add',
                    'familyId': this.data.familyId,
                    'remove': addressAction.remove
                })
            },
            showEditAdressLayer(addressData) {
                addressAction.showAddressForm({
                    "title": '编辑地址',
                    "type": 'edit',
                    'addressData': addressData,
                    'remove': addressAction.remove
                })
            },
            delStuAddress(addressId) {
                let data = {
                    'id': addressId
                }
                let callback = (status) => {
                    if (status == 200) { //httpCode 状态码是200 成功，其他状态码失败
                        this.$Message.success('删除成功！');
                        this.$store.dispatch('getStudentAddress', {
                            'familyId': this.data.familyId
                        })
                    } else {
                        this.$Message.warning('删除失败！');
                    }
                }
                thirdService.delStuAddress({
                    data,
                    callback
                })
            },
            setDefaultAddress(addressId) {
                let data = {
                    'id': addressId,
                    'isDefault': 1
                }
                let callback = (status) => {
                    if (status == 200) { //httpCode 状态码是200 成功，其他状态码失败
                        this.$Message.success('设置默认地址成功！');
                        this.$store.dispatch('getStudentAddress', {
                            'familyId': this.data.familyId
                        })
                    } else {
                        this.$Message.warning('设置默认地址失败！');
                    }
                }
                thirdService.setStuDefaultAddress({
                    data,
                    callback
                })
            }
        }



    }
</script>